<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商家管理</el-breadcrumb-item>
        <el-breadcrumb-item>商家列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getMerchantList">
              <el-button slot="append" icon="el-icon-search" @click="getMerchantList"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="merchantList" stripe border>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="用户名" prop="rname"></el-table-column>
          <el-table-column label="密码" prop="rpassword"></el-table-column>
          <el-table-column label="商家名" prop="rnickname"></el-table-column>
          <el-table-column label="地址" prop="address"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="电话" prop="phone"></el-table-column>
          <el-table-column label="操作" width="130px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-view" size="mini" @click="queryMerchantById(scope.row.rid)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeMerchantById(scope.row.rid)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" background>
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      // 查询参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      // 商家列表
      merchantList: [],
      // 总数据条数
      total: 0
    }
  },
  created () {
    this.getMerchantList()
  },
  methods: {
    // 获取所有商家
    async getMerchantList () {
      const { data: result } = await this.$axios.get('/admin/restaurant/query', { params: this.queryInfo })
      if (result.status !== 2000) {
        return this.$message.error('获取商家列表失败')
      }
      this.merchantList = result.data.restaurants
      this.total = result.data.total
    },
    // 当每页显示的最大数据条数发生变化时，调用该函数
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getMerchantList()
    },
    // 当当前页数发生变化时，调用该函数
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getMerchantList()
    },
    // 根据id删除对应的商家
    async removeMerchantById (rid) {
      const confirmResult = await this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult === 'cancel') {
        return this.$message.info('已取消删除')
      }
      const rId = { rid: rid }
      const { data: result } = await this.$axios.delete('/admin/restaurant/deleteByID', { params: rId })
      if (result.status !== 2000) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      await this.getMerchantList()
    },
    async queryMerchantById (rid) {
      const rId = { rid: rid }
      const { data: result } = await this.$axios.get('/admin/restaurant/queryByID', { params: rId })
      if (result.status !== 2000) {
        return this.$message.error('查看失败')
      }
      await this.$router.push({ name: 'AdminMerchantDetails', params: { data: result.data } })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
